{% if isTemplate != true %}
{% include account_nav %}
{% endif %}

<div class="container_wrapper account_orders" id="account_orders">
  <h2 class="title">{{lang.account.default.orders}}</h2>
  {% assign length = account_order.orders | size %}

  {% if length %}

  {% for item in account_order.orders %}
  <div class="order-card">
    <div class="order-card-header">

      <dl>
        <dt>{{lang.account.orders.order_number}}</dt>
        <dd style="font-weight: 500;">{{ item.order_number }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.order_status}}</dt>
        <dd style="color: #666666;">{{ item.financial_status_name | upcase }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.total_price}}</dt>
        <dd style="color: #E61132;font-weight: 500;">{{ item.total_price | money:item.currency, true, false }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.date}}</dt>
        <dd style="color: #666666;" class="order-text-medium format-date" data-date="{{item.created_at}}" data-format="YYYY-mm-dd">{{ item.created_at | date: "%Y-%m-%d" }}</dd>
      </dl>

      <!-- <div style="display:flex;align-items: center;">
          <span class="order-card-header-text">{{lang.account.orders.order_number}}{{ item.order_number }}</span>
          <span class="mo-tag">{{ item.financial_status_name | upcase }}</span>
        </div> -->

      <!-- <div class="order-text-medium format-date" data-date="{{item.created_at}}" data-format="YYYY-mm-dd HH:MM:SS">{{ item.created_at | date: "%Y-%m-%d %H:%M:%S" }}</div> -->
    </div>
    <div class='product-box'>
    {% for product in item.products %}
    {% assign keyIndex = forloop.index %}
    <div class="order-card-content" {% if  keyIndex > 1 %}style="display:none"{% endif %}>
      <div class="order-card-info">
        <a class="order-card-info-picture" href="/products/detail/{{product.product_id}}?data_from={{data_from}}">
          <img data-src="{{ product.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" class="order-card-info-picture-image" alt="{{product.product_title}}" />
        </a>
        <div class="order-card-info-detail">
          <a class="order-card-info-title line-clamp2" href="/products/detail/{{product.product_id}}?data_from={{data_from}}" style="text-align: left;">{{product.product_title}}</a>
          {% if item.products[0].sku_value %}
          <div class="order-card-info-sku">{{product.sku_value}}</div>
          {% endif %}
          <div class="order-card-info-sku">{{lang.account.orders_detail.spu}}: {{product.spu | default:"-" }}，{{lang.account.orders_detail.sku}}: {{product.sku | default:"-" }}</div>

          <div class="order-card-info-price">
            <span>{{product.price | money:item.currency, true, false }}</span>
            <span>x</span>
            <span>{{product.quantity}}</span>
            <span>=</span>
            <span>{{product.price | times:product.quantity | item:info.currency, true, false }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="order-card-number">
        <div class="order-card-number-value">{{product.price | times : product.quantity | money:item.currency, true, false}}</div>
      </div> -->
    </div>
    {% endfor %}
    </div>

    <div class="order-card-footer">
      {% assign productSize = item.products | size %}
      {% if productSize == 1 %}
      <div class=""></div>
      {% else %}
      <div class="order-card-footer-full">{{lang.account.orders.show_full}}</div>
      {% endif %}
      <div class="order-card-handle">
        {% if item.financial_status == 200 and item.status != 190 %}
        <a class="mo-btn main_btn" href="{{item.pay_url}}">{{lang.account.orders.pay_now}}</a>
        {% endif %}
        <a class="mo-btn secondary_btn" href="/account/orders/{{item.order_number}}">{{lang.account.orders.detail}}</a>
      </div>
    </div>
  </div>
  {% endfor %}
  {% include pagination ,{paginate:paginate } %}
  {% else %}
  {% include empty ,{text:lang.account.orders.empty,icon:'order',btnText:lang.account.orders.empty_btn_text,isBtn:true}%}
  {% endif %}

  <div class="back-box">
    <a href="/account">
      <!-- {% include icon_account_back ,width:'32',height:'28' %} -->
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{ lang.account.default.account }}</span>
    </a>
  </div>
</div>

<script type="text/javascript">
  console.log({{ account_order.orders | json }});
  (function () {
    $(".order-card-footer-full").click(function () {
      const type = $(this).data("type");
      if (type === "hide") {
        const products = $(this).parent().siblings('.product-box').children(".order-card-content");
        products.hide();
        products.eq(0).show();
        $(this).html("{{lang.account.orders.show_full}}");
        $(this).data("type", 'show');
      } else {
        const products = $(this).parent().siblings('.product-box').children(".order-card-content");
        products.show()
        $(this).html("{{lang.account.orders.show_less}}");
        $(this).data("type", 'hide');
      }

    })
  })()
</script>